<template>
  <a-modal
    title="选择审批人员"
    :visible="visible"
    :closable="false"
    centered
    @ok="handleOk"
    @cancel="handleCancel"
    width="600px"
  >
    <div
      style="min-height: 200px; max-height: 500px; justify-content: space-around; display: flex; flex-direction: column"
    >
      <div style="width: 80%">
        <a-form-model :model="form" ref="selectUserForm">
          <template v-for="(item, index) in columns">
            <template v-if="item.show == '1'">
              <a-form-model-item
                v-if="item.showCondition"
                :label="item.label"
                :label-col="{ span: 8 }"
                :wrapper-col="{ span: 15 }"
                :key="'conditionNode' + index"
                :required="(item.required == '1' || item.requird == '1')"
              >
                <CodeSelector
                  :type="item.type"
                  :codes="item.showCondition"
                  codeKey="code"
                  nameKey="name"
                  :code.sync="columns[index].value"
                  :disabled="item.disabled == 'true' ? true : false"
                  :multiple="item.mode"
                  @change="change(columns[index])"
                ></CodeSelector>
              </a-form-model-item>
              <a-form-model-item
                v-if="!item.showCondition && item.show != '0'"
                :label="item.label"
                :label-col="{ span: 8 }"
                :wrapper-col="{ span: 15 }"
                :key="'userNode' + index"
                :required="(item.required == '1' || item.requird == '1')"
              >
                <UserInputSelector
                  :username.sync="columns[index].value"
                  :realname.sync="columns[index].text"
                  :disabled="item.disabled == 'true' ? true : false"
                  :multiple="item.mode"
                  :limit="item.limit"
                  :placeholder="columns[index].placeholder"
                />
              </a-form-model-item>
            </template>
          </template>
        </a-form-model>
      </div>

      <div style="display: flex" v-if="labels && labels.length > 0">
        <div style="min-width: 60px; max-width: 60px; line-height: 35px">审批流程:</div>
        <div style="display: flex; flex-wrap: wrap; line-height: 35px">
          <template v-for="(item, index) in labels">
            <div :key="'labels' + index">
              <span style="margin: 5px; padding: 5px; border: 1px solid grey">{{ item }}</span
              >->
            </div>
          </template>
          <div><span style="margin: 5px; padding: 5px; border: 1px solid grey">结束</span></div>
        </div>
      </div>
      <div v-if="tips" style="color: red">注意:{{ tips }}</div>
    </div>
  </a-modal>
</template>
<script>
import { UserMixin } from '@/mixins/UserMixin'
export default {
  mixins: [UserMixin],
  components: {
    UserSelect: () => import('@/components/tools/UserSelect'),
  },
  props: {},
  name: 'ProcessUserSelect',
  data() {
    return {
      form: {},
      visible: false,
      columns: [],
      tips: null,
    }
  },
  mounted() {},
  computed: {
    labels() {
      let temp = []
      for (let col of this.columns) {
        if (col.isNode == '2' || (col.isNode == '1' && col.show != '0')) {
          temp.push(col.label)
        }
      }
      return temp
    },
  },
  methods: {
    doSelect(columns, tips) {
      this.columns = columns
      this.tips = tips
      this.visible = true
      this.columns.forEach((c) => {
        if (c.showCondition) {
          this.change(c)
        }
      })
    },
    handleOk() {
      for (let col of this.columns) {
        if (col.show != '0') {
          if (!col.value && (col.required == '1' || col.requird == '1')) {
            return this.$message.warning('请选择' + col.label)
          }
        }
      }
      this.visible = false
      this.$emit('selectUserConfirm', this.columns)
    },
    handleCancel() {
      this.visible = false
      // this.$emit('selectUserConfirm', null)
    },
    change(item) {
      console.info(item)
      let selectNode = item.value
      if (selectNode) {
        selectNode = selectNode.split(',')
      }
      let codeNode = item.codeNode
      if (codeNode && selectNode) {
        let activeNode = []
        let invaildNode = []
        codeNode.forEach((n) => {
          if (selectNode.indexOf(n.code+"") > -1) {
            activeNode = n.nodes
          } else {
            invaildNode = [...invaildNode, ...n.nodes]
          }
        })
        if (activeNode) {
          this.columns.forEach((c) => {
            if (invaildNode.indexOf(c.node+"") > -1) {
              c.show = '0'
            }
            if (activeNode.indexOf(c.node+"") > -1) {
              c.show = '1'
            }
          })
        }
      }
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-transfer-list .ant-btn-primary {
  color: #bbb;
}
/deep/ .ant-transfer-list:first-of-type .ant-transfer-list-header-selected {
  display: none;
}
/deep/ .ant-modal-content {
  border-radius: 15px;
}
/deep/ .ant-modal-title,
/deep/ .ant-modal-footer {
  text-align: center;
}
/deep/ .ant-transfer-operation .ant-btn-primary {
  background-color: #f5f5f5 !important;
}
/deep/ .ant-modal-header {
  border-radius: 15px 15px 0 0;
  background-image: linear-gradient(90deg, #15b1ff 0%, #1158c9 100%);
}
/deep/ .ant-modal-title {
  color: #fff;
}
/deep/ .ant-form-item-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
